// edX: Certificates - View: Invalid Certificate
// ====================
.view--invalid-certificate {
  background: $bg-view;

  // layout
  .wrapper--view {
    background: transparent url('../images/bg-paperfibers.png') 0 0 repeat-both;
    padding-bottom: ($baseline-v*3);

    @include media($bp-ds) {
      padding-bottom: $baseline-h;
    }

    @include media($bp-m) {
      padding-bottom: $baseline-h;
    }
  }

  .wrapper--content {
    padding: $baseline-v ($baseline-h*2);

    @include media($bp-ds) {
      padding: $baseline-v $baseline-h;
    }

    @include media($bp-m) {
      padding: $baseline-v $baseline-h;
    }
  }

  .content {
    @include outer-container;

    a {
      @extend %link-copy;
    }
  }

  // status
  .status {
    @include row();
    padding: $baseline-v ($baseline-h*2);
    border-top-radius: ($baseline-v/10);
    box-shadow: inset 0 -2px 2px 0 $shadow-l2;
    background: $edx-pink;
    color: $white-t;
    text-transform: uppercase;
    letter-spacing: 0.1rem;

    @include media($bp-ds) {
      padding: ($baseline-v) ($baseline-h);
    }

    @include media($bp-m) {
      padding: ($baseline-v) ($baseline-h);
    }

    .title {
      @extend %t-title-6;

      @include media($bp-dl) {
        @include span-columns(9 of 12);
      }

      @include media($bp-dm) {
        @include span-columns(9 of 12);
      }

      @include media($bp-ds) {
        @include font-size(14); // can't use %t-title-8 for some reason
        @include lh(14);
      }

      @include media($bp-m) {
        @include font-size(14); // can't use %t-title-8 for some reason
        @include lh(14);
      }
    }
  }

  // accomplishment
  .feedback {
    @extend %ui-shadow-subtle-down;
    @extend %trans-size;
    @include clearfix();
    @include row();
    @include pad(($baseline-v*2) ($baseline-h*2) ($baseline-v*3) ($baseline-h*2));
    margin-bottom: ($baseline-v*2);
    border-radius: ($baseline-v/10);
    border: 1px solid $gray-l5;
    background: $white-t;

    @include media($bp-ds) {
      padding: ($baseline-v) ($baseline-h);
    }

    @include media($bp-m) {
      padding: ($baseline-v) ($baseline-h);
    }
  }

  .feedback__lead {
    margin-bottom: ($baseline-v);
    padding-bottom: ($baseline-v);
    border-bottom: 1px solid $gray-l5;

    .title {
      @extend %t-title-3;
      @extend %t-weight3;
      margin-bottom: ($baseline-v/2);
    }

    .copy {
      @extend %t-copy-lead2;
      color: $edx-pink;
    }
  }

  .feedback__support {
    @include span-columns(6 of 12);
    margin-bottom: $baseline-v;

    @include media($bp-ds) {
      @include fill-parent;
    }

    @include media($bp-m) {
      @include fill-parent;
    }

    .title {
      @extend %t-title-6;
      @extend %t-weight3;
      margin-bottom: ($baseline-v/2);
    }

    .copy {
      color: $gray-l2;
    }
  }

  .feedback__warning {
    @include span-columns(6 of 12);
    @include omega();

    @include media($bp-ds) {
      @include fill-parent;
    }

    @include media($bp-m) {
      @include fill-parent;
    }

    .title {
      @extend %t-title-6;
      @extend %t-weight3;
      margin-bottom: ($baseline-v/2);
    }

    .copy {
      color: $gray-l2;
    }
  }

  // ====================

  // supplemental content
  .content--supplemental {

    @include media($bp-dm) {
    }

    @include media($bp-ds) {
    }

    @include media($bp-m) {
    }

    .title {
      @extend %t-title-7;
      @extend %t-weight3;
      margin-bottom: ($baseline-v/2);
    }

    .copy {
      @extend %t-copy-sub1;
      color: $gray-l2;
    }

    .list--actions {
      margin-top: ($baseline-v);

      .action {
        @extend %t-copy-sub1;
        @extend %btn-primary;

        @include media($bp-dm) {

        }

        @include media($bp-ds) {
          display: block;
          text-align: center;
        }

        @include media($bp-m) {
          display: block;
          text-align: center;
        }
      }
    }
  }

  .supplemental__how {
    @extend %trans-size;
    @include span-columns(3 of 12);

    @include media($bp-dm) {
      @include span-columns(6 of 12);
    }

    @include media($bp-ds) {
      @include fill-parent;
      margin-bottom: ($baseline-v*2);
    }

    @include media($bp-m) {
      @include fill-parent;
      margin-bottom: ($baseline-v*2);
    }
  }

  .supplemental__certificates {
    @extend %trans-size;
    @include span-columns(3 of 12);
    @include omega();

    @include media($bp-dm) {
      @include span-columns(6 of 12);
    }

    @include media($bp-ds) {
      @include fill-parent;
    }

    @include media($bp-m) {
      @include fill-parent;
    }
  }

  .supplemental__about {
    @extend %trans-size;
    @include span-columns(6 of 12);

    @include media($bp-dm) {
      @include fill-parent;
      margin-bottom: ($baseline-v*2);
    }

    @include media($bp-ds) {
      @include fill-parent;
      margin-bottom: ($baseline-v*2);
    }

    @include media($bp-m) {
      @include fill-parent;
      margin-bottom: ($baseline-v*2);
    }
  }

  // CASE: honor code
  &.is-honorcode {

    .status {
      background: $edx-blue-l2;
    }

    .certificate--type {
      color: $edx-blue-l2;
    }

    // .content--supplemental .list--actions .action {
    //   @extend %btn-secondary;
    // }
  }

  // CASE: verified
  &.is-idverified {

    .status {
      background: $edx-blue;
    }

    .accomplishment {
      background: $white-t url("../images/logo-idverified-cropped.png") bottom left no-repeat;
      background-size: 75%;

      @include media($bp-ds) {
        background-size: 75%;
      }

      @include media($bp-m) {
        background-size: 100%;
      }
    }

    .copy__course__org {
      color: $edx-pink;
    }

    .copy__course__name {
      color: $edx-pink;
    }

    .certificate--type {
      color: $edx-blue;


      .wrapper--img {
        width: 200px;
        border-radius: ($baseline-h*10);
        padding: ($baseline-v/2) ($baseline-h/2);
        background: $white-t;
        margin: -($baseline-v*4) auto 0 auto;

        @include media($bp-dm) {
          float: right;
          margin: 0 0 $baseline-h $baseline-h;
        }

        @include media($bp-ds) {
          width: 150px;
          float: right;
          margin: 0 0 $baseline-h $baseline-h;
        }

        @include media($bp-m) {
          width: 100px;
          float: right;
          margin: 0;
        }

        img {
          @include fill-parent();
        }
      }
    }
  }
}
